<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> JiWai De </TITLE>
  <meta http-equiv="Content-Type"; content="text/html,charset=utf-8" />
	<style type="text/css">
			*{padding:0;margin:0;}
			a{text-decoration:none;}
			.wrapper{ width:515px; padding:5px;margin:5px; font-family:Microsoft YaHei,Arial; border:1px solid #999; }
			img{ border:1px solid #ccc; padding:2px;}
			.imgCon{float:left; width:60;}
			.imgCon p{font-size:12px;width:48px; overflow:hidden; white-space: nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;-webkit-text-overflow: ellipsis;}
			.c{float:left; width:445px;}
			.c p {padding:5px;font-size:14px}
			.c p a {width:430px; overflow:hidden; white-space: nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;-webkit-text-overflow: ellipsis;}
			.c span{text-align:right;display:block;font-size:12px}
			.bkgc{background-color:#ddd}
	</style>

	 
  <script type="text/javascript">
		var XMLHttpRequestObject = false;
		
		if(window.XMLHttpRequest){
			XMLHttpRequestObject = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			XMLHttpRequestObject = false;
		}

		function getData(src){
			if(XMLHttpRequestObject){
				XMLHttpRequestObject.open("GET",src);
				XMLHttpRequestObject.onreadystatechange = function (){
					if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200 ){
						var jsonData = eval(XMLHttpRequestObject.responseText);
						processJsonData(jsonData);
					}
				}

				XMLHttpRequestObject.send(null);
			}
		}

		function processJsonData(json){
			
			var output = '';
			
			//alert(typeof(json));
			for(i=19;i>=0;i--){
				var t = json[i].created_at;
				var t =new Date(t.substr(0,19) + t.substr(25));
					  t =t.toLocaleDateString() + t.toLocaleTimeString();

				var s = unescape(json[i].text);

				s = s.replace(/(?:http|https|ftp)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(?:\:[a-zA-Z0-9]*)?\/?(?:[a-zA-Z0-9\-\._\?\,\'\/\\\+&amp;%\$#\=~])*/g,'<a href="$&" target="_blank">$&</a>');

				var uname = unescape(json[i].user.screen_name);
				var uprofile = json[i].user.profile_url;
				var udescription = unescape(json[i].user.description);
				var uimg = json[i].user.profile_image_url;

				if(i%2 == 1){
					var bkg = 'style="background:#ddd"';
				}else{
					bkg = '';
				}

				output ='<div class="wrapper" '+bkg+'><div class="imgCon"><a href="'+uprofile+'" target="_blank"><img src="'+uimg+'" height="48" width="48" alt="'+uname+'"/></a><p><a href="'+uprofile+'" target="_blank">'+uname+'</a></p></div><div class="c"><span>'+t+'</span><hr><p>'+s+'</p></div><br style="clear:both" /></div>';

				var d = document.createElement("div");
					  d.style.className='div';
					  d.id = i;
					  d.innerHTML = output;
				var con = document.body;
					if(con.childNodes.length == 20){
						var lc = con.lastChild;
						con.removeChild(lc);
					};
						var fc = con.firstChild;
						con.insertBefore(d,fc);
			}
		}

		var j = 10;

		function aniBack(obj){
				if(j<100){ 
					j++; 
					obj.style.filter="Alpha(Opacity="+j+")";
					obj.style.opacity=(j/100);
					setTimeout(function (){ aniBack(obj); },100);
				}	   
		}

		window.onload = function wo(){
			getData("http://api.jiwai.de/statuses/public_timeline.json");
			setTimeout(function(){wo();},1000);
		}

  </script>
 </HEAD>
 <BODY>
	Loading Data, Please Be Patient and Thank you!
 </BODY>
</HTML>
